<template>
    <!-- 协议 -->
    <div class="helper flex-box" @mouseleave="qrCodeShow = false">
        <div class="l flex-box b-center">
            <div class="item" @mouseenter="showQrCode('wechatWork')">
                <img width="24" height="24" src="@/assets/login/wechat-work-icon.png" />
                <span class="mt-6">企微客服</span>
            </div>
            <div class="item" @mouseenter="showQrCode('workApp')">
                <img width="18" height="18" src="@/assets/login/qrcode-icon.png" />
                <span class="mt-10">潮工作</span>
            </div>
        </div>
        <div v-if="qrCodeShow" class="qrcode-wrap" :class="qrCodeType === 'wechatWork' ? 'wechat-work' : 'work-app'">
            <img v-if="qrCodeType === 'wechatWork'" class="qrcode-img" src="@/assets/login/wechat-work-qrcode.png" />
            <div v-else class="qrcode-box">
                <img class="qrcode-img" src="@/assets/login/work-app-qrcode.png" />
                <span class="mt-16">扫码下载潮工作APP</span>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';

const qrCodeShow = ref(false);
const qrCodeType = ref<String>('wechatWork');
const qrcode
    = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.xjishu.com%2Fimg%2Fzl%2F2018%2F6%2F30%2F1241359458913.gif&refer=http%3A%2F%2Fimg.xjishu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657444060&t=e7ccaf04ce8218275813d3eedc6cd482';

const showQrCode = (type: String) => {
    qrCodeShow.value = false;
    qrCodeShow.value = true;
    qrCodeType.value = type;
};

</script>

<style lang='scss' scoped>
.b-center {
    justify-content: center;
    align-items: center;
}
.flex-box {
    display: flex;
}
// 联系客服
.helper {
    box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.06), 0px 0px 4px 1px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    right: 40px;
    bottom: 40px;
    padding: 2px 10px;
    flex-direction: row-reverse;
    z-index: 9;
    .l {
        flex-direction: column;
        height: 124px;
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
    }
    .item {
        font-size: 12px;
        color: #5b5b5b;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        & + .item {
            border-top: 1px solid #eee;
        }
    }
    .qrcode-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        &.wechat-work {
            width: 156px;
            height: 156px;
            padding: 0 0 2px 1px;
            background: url(@/assets/login/wechat-work-bg.png);
            background-size: cover;
            right: 66px;
            bottom: 25px;
        }
        &.work-app {
            width: 171px;
            height: 189px;
            padding: 5px 8px 0 0;
            background: url(@/assets/login/work-app-bg.png);
            background-size: cover;
            right: 58px;
            bottom: -30px;
        }
        .qrcode-box {
            font-size: 12px;
            color: #666;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .qrcode-img {
            width: 100px;
            height: 100px;
        }
    }
}
</style>
